import React, { useEffect, useState } from "react";
import axios from 'axios';
import pubsub from 'pubsub-js'
export default function Header() {

    const [plentyPicture , setPlentyPicture] = useState('')

    const getItemList = async () => {
        pubsub.publish("github", { isInit: false, isSearch: true, data: [] })
        const result  = await axios.get("https://api.github.com/search/users?q=" + plentyPicture)
        pubsub.publish('github',{ isInit: false, isSearch: false, data: result.data.items })
    }

  return (
    <div>
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input type="text" value={plentyPicture} onChange = {(e) => {setPlentyPicture(e.target.value)}} placeholder="enter the name you search" />
          &nbsp;<button onClick={getItemList}>Search</button>
        </div>
      </section>
    </div>
  );
}
